import 'package:flutter/material.dart';
import 'items.dart';

class HomeItemPage extends StatefulWidget {
  @override
  _HomeItemPageState createState() => _HomeItemPageState();
}

Widget _timeTabBarItem(String title) {
  return Tab(
    child: Container(
      margin: EdgeInsets.only(left: 10.0, right: 10.0),
      child: Text(
        title,
      ),
    ),
  );
}

class _HomeItemPageState extends State<HomeItemPage>
    with
        SingleTickerProviderStateMixin,
        AutomaticKeepAliveClientMixin<HomeItemPage> {
  TabController _timeTabController;
  List<String> topList = List();
  List<Tab> timeTabs = <Tab>[
    _timeTabBarItem("语文"),
    _timeTabBarItem("数学"),
    _timeTabBarItem("计算机"),
    _timeTabBarItem("生命科学"),
    _timeTabBarItem("化学"),
    _timeTabBarItem("体育"),
    _timeTabBarItem("游泳"),
    _timeTabBarItem("健身"),
    _timeTabBarItem("瑜伽"),
    _timeTabBarItem("跑步"),
  ];

  ///时间选择
  Widget _timeSelection() {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        /// 固定整个布局的高，否则选中时间背景显示不全
        Container(
          height: 55,
          color: Color.fromRGBO(255, 255, 255, 0.9),
        ),

        /// 未选中时间背景色
        // Container(
        //   height: 55 - 5.0,
        //   color: Colors.black,
        // ),

        /// 选中时间背景图片
        // Positioned(
        //   width: width / 6,
        //   height: 55,

        //   ///一行有6个Tab，每次移动的距离=当前移动到的位置*单个tab的宽
        //   left: _timeTabController.animation.value * width / 6,
        //   child: Image.asset(
        //     "images/time_selected_bg.png",
        //     fit: BoxFit.fill,
        //   ),
        // ),
        PreferredSize(
          preferredSize: Size.fromHeight(55.0),
          child: TabBar(
            labelPadding: EdgeInsets.all(0),
            tabs: timeTabs,
            controller: _timeTabController,
            isScrollable: true,
            labelColor: Colors.black,
            indicatorSize: TabBarIndicatorSize.tab,
            labelStyle:
                TextStyle(color: Colors.blue, fontWeight: FontWeight.w500),
            indicatorColor: Colors.black,
            indicatorPadding: EdgeInsets.only(bottom: 0.0),
          ),
        )
      ],
    );
  }

  @override
  void initState() {
    super.initState();
    _timeTabController =
        TabController(vsync: this, initialIndex: 0, length: timeTabs.length);
    _timeTabController.animation.addListener(() {
      setState(() {});
    });
    topList.add("images/banner.jpeg");
    topList.add("images/banner.jpeg");
    topList.add("images/banner.jpeg");
  }

  @override
  void dispose() {
    _timeTabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);

    return NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverOverlapAbsorber(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
            // child: SliverAppBar(
            //   backgroundColor: Color(0xfff1f1f1),
            //   forceElevated: innerBoxIsScrolled,
            //   bottom: PreferredSize(
            //     child: Container(),
            //     preferredSize: Size.fromHeight(180.0),
            //   ),
            //   flexibleSpace: Container(
            //     child: Center(
            //       child: Text('内容站位'),
            //     ),
            //   ),
            // ),
          ),
          SliverPersistentHeader(
            delegate: _SliverAppBarDelegate(_timeSelection()),
            pinned: true,
          ),
        ];
      },
      body: TabBarView(controller: _timeTabController, children: <Widget>[
        Items(
          index: 1,
        ),
        Items(
          index: 2,
        ),
        Items(
          index: 3,
        ),
        Items(
          index: 4,
        ),
        Items(
          index: 5,
        ),
        Items(
          index: 6,
        ),
        Items(
          index: 7,
        ),
        Items(
          index: 8,
        ),
        Items(
          index: 9,
        ),
        Items(
          index: 10,
        ),
      ]),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

///TabBar的代理
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate(this._tabBar);

  final Stack _tabBar;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return _tabBar;
  }

  @override
  double get maxExtent => 55;

  @override
  double get minExtent => 55;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}
